<style>
.titu {
	display:none;
	color:#006bb7;
	font-weight:bold;
	margin-top:-25px;
}
#miolo {
	margin:0 auto;
}
#miolofrontpage {
	position:relative;
	width:1024px;
}
#produto1 {
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto2 {
	/*margin-left: 85px;*/
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto3 {
	margin-left: 175px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto4 {
	margin-left: 255px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto5 {
	margin-left: 355px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto6 {
	margin-left: 440px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto7 {
	margin-left: 540px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto8 {
	margin-left: 610px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto9 {
	margin-left: 690px;
	position:absolute;
	bottom:0;
	text-align:center;
}
#produto10 {
	margin-left: 810px;
	position:absolute;
	bottom:0;
	text-align:center;
}
</style>
<div id="miolofrontpage">
	<script>
	var margemesquerda = 0;
	var maioraltura = 0;
    function fimg(idimg)
    {
        var img = document.getElementById('img'+idimg);
		var widthh = document.getElementById('img'+idimg).width;
        var heightt = document.getElementById('img'+idimg).height;
		var zind = 0;
		if(parseInt(idimg)%2==1)
		{
			document.getElementById('produto'+idimg).style.zIndex  = 2;
			zind=2;
		}
		else
		{
			document.getElementById('produto'+idimg).style.zIndex = 1;
			zind=1;
		}
		$('#produto'+idimg).mouseover(function() {
		  $(this).stop().animate({width:widthh*0.95, height:heightt*0.95, marginBottom:-(heightt-(heightt*0.95)), easing:'linear'},100,'linear', function(){$(this).stop().animate({width:widthh, height:heightt, marginBottom:-(heightt-(heightt*0.84))},100,'linear').css('z-index','10');});
		  document.getElementById('img'+idimg).style.width = '100%';
          document.getElementById('img'+idimg).style.height = '100%';
		  //document.getElementById('produto'+idimg).style.marginBottom = '-'+(heightt-(heightt*0.9))+'px';
		  document.getElementById('tit'+idimg).style.display = 'block';
		});
		$('#produto'+idimg).mouseout(function() {
		  $(this).stop().animate({width:widthh*0.9,height:heightt*0.9, marginBottom:0}).css('z-index',zind);
		  document.getElementById('img'+idimg).style.width = '100%';
          document.getElementById('img'+idimg).style.height = '100%';
		  document.getElementById('tit'+idimg).style.display = 'none';
		});
		document.getElementById('produto'+idimg).style.width = widthh*0.9+'px';
        document.getElementById('produto'+idimg).style.height = heightt*0.9+'px';
		document.getElementById('img'+idimg).style.width = '100%';
        document.getElementById('img'+idimg).style.height = '100%';
		if (heightt > maioraltura)
		{
			maioraltura = heightt;
			document.getElementById('miolofrontpage').style.height = maioraltura+'px';
		}
		if (parseInt(idimg) > 1)
		{
			document.getElementById('produto'+idimg).style.marginLeft = margemesquerda+'px';
		}
		margemesquerda = margemesquerda + widthh - (widthh*0.33);
    }
	$("img1").load(function(){
    	fimg('1');
		alert(document.getElementById("img1").readyState);
		$("img2").load(function(){
    		fimg('2');
			$("img3").load(function(){
				fimg('3');
				$("img4").load(function(){
					fimg('4');
					$("img5").load(function(){
						fimg('5');
						$("img6").load(function(){
							fimg('6');
							$("img7").load(function(){
								fimg('7');
								$("img8").load(function(){
									fimg('8');
									$("img9").load(function(){
										fimg('9');
										$("img10").load(function(){
											fimg('10');
										});
									});
								});
							});
						});
					});
				});
			});
		});
	});
    </script>
    <div id="produto1" style="position:absolute;">
        <img id="img1" src="img/queijo-prato.png" />
        <div id="tit1" class="titu">Kejo prato</div>
    </div>
    <div id="produto2" style="position:absolute;">
        <img id="img2" src="img/requijao-barra.png" />
        <div id="tit2" class="titu">Re-kejo grande</div>
    </div>
    <div id="produto3">
        <img id="img3" src="img/queijo-padrao.png" />
        <div id="tit3" class="titu">Kejim minas</div>
    </div>
    <div id="produto4">
        <img id="img4" src="img/ricota.png" />
        <div id="tit4" class="titu">Cocota fresca</div>
    </div>
    <div id="produto5">
        <img id="img5" src="img/queijo.png" />
        <div id="tit5" class="titu"></div>
    </div>
    <div id="produto6">
        <img id="img6" src="img/coalhada.png" />
        <div id="tit6" class="titu"></div>
    </div>
    <div id="produto7">
        <img id="img7" src="img/creme-de-leite.png" />
        <div id="tit7" class="titu">creme de leche</div>
    </div>
    <div id="produto8">
        <img id="img8" src="img/requijao-cremoso.png" />
        <div id="tit8" class="titu"></div>
    </div>
    <div id="produto9">
        <img id="img9" src="img/cottage.png" />
        <div id="tit9" class="titu"></div>
    </div>
    <div id="produto10">
        <img id="img10" src="img/manteiga.png" />
        <div id="tit10" class="titu"></div>
    </div>
</div>